<template>
	<view>
		<!-- 表格内容 -->
		<el-table v-loading="loading" class="mt-5" :header-cell-style="{background:'rgb(245,245,245)',color:'#000'}"
			:data="tableData" @row-click="handleDetail" style="width: 100%" :height="height">
			<slot></slot>
		</el-table>
		<view class="flex justify-end w-100 my-2 bg-white py-2">
			<el-pagination background v-if="total > 0" @size-change="handleSizeChange"
				@current-change="handleCurrentChange" :current-page="page" :page-sizes="[5,10,20,50]"
				:page-size="limit" layout="total, sizes, prev, pager, next, jumper" :total="total">
			</el-pagination>
		</view>
	</view>
</template>

<script>
	const app = getApp()
	export default {
		name: "purchasinghall",
		props: {
			tableData: {
				type: Array,
				default: []
			},
			total: {
				type: Number,
				default: 0
			},
			limit: {
				type: Number,
				default: 0
			},
			page: {
				type: Number,
				default: 0
			},
			loading: {
				type: Boolean,
				default: true
			},
			height:{
				type:String,
				default:''
			}
		},
		data() {
			return {
				ThemeColors: app.globalData.ThemeColors,
				Domain_IMG: app.globalData.Domain_IMG,
			};
		},
		methods: {
			handleSizeChange(val) {
				this.$emit('limitval',val)
			},
			handleCurrentChange(val) {
				this.$emit('pageval',val)
			},
			handleDetail(row){
				this.$emit('row-click',row)
			}
		},
	};
</script>

<style lang="scss">
	.box {
		box-sizing: border-box;
	}

	.purchase-cell {
		font-size: 14px;
		display: flex;
		padding: 10px 20px;
		box-sizing: border-box;
	}

	.pagination {
		width: 100%;

		.fen {
			text-align: center;
			margin: 40px auto 60px;
			display: flex;
			align-items: center;
			justify-content: center;
			width: 1800rpx;

			.left {
				width: 80rpx;
				height: 80rpx;
				color: #c0c4cc;
				border: none;
				margin: 0 6px !important;
			}

			.num {
				display: flex;
				align-items: center;
				justify-content: flex-start;

				.num-item {
					padding: 0 4px;
					background: #f4f4f5;
					font-size: 13px;
					min-width: 40px;
					box-sizing: border-box;
					transition: background-color 0.2s linear;
					width: 64rpx;
					height: 80rpx;
					line-height: 80rpx;
					text-align: center;
					color: #606266;
					border-radius: 2px;
					margin: 0 6px;
					font-weight: bold;
				}

				.num-item:hover {
					background-color: #45b035;
					color: #ffffff;
					border-radius: 2px;
					min-width: 40px;
				}

				.num-item:first-child {
					background-color: #45b035;
					color: #ffffff;
				}
			}

			.num-item-text {
				display: inline-block;
				margin: 0 15rpx;
			}

			.eye-pagination__jump {
				display: flex;
				border: 1px solid #dcdfe6;
				height: 40px;
				margin-left: 8px;
				color: #606266;
				border-radius: 3px;

				text {
					line-height: 40px;
					padding: 0 12px;
				}

				view {
					width: 50px;
					margin-left: 8px;
					border-left: 1px solid #dcdfe6;
					border-right: 1px solid #dcdfe6;
					display: flex;
					align-items: center;

					input {
						height: 37px !important;
					}
				}
			}
		}
	}
</style>